<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physics-canvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physics-canvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Coordinates for the origin
        const originX = 220;
        const originY = 200;

        // Helper function for drawing an arrow
        function drawArrow(x1, y1, x2, y2) {
            const headlen = 10;
            const dx = x2 - x1;
            const dy = y2 - y1;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        
        // Helper function for drawing a cross 'x'
        function drawCross(x, y, size = 8) {
            ctx.save();
            ctx.lineWidth = 1.5;
            ctx.beginPath();
            ctx.moveTo(x - size, y - size);
            ctx.lineTo(x + size, y + size);
            ctx.moveTo(x + size, y - size);
            ctx.lineTo(x - size, y + size);
            ctx.stroke();
            ctx.restore();
        }

        // 1. Draw Coordinate Axes
        drawArrow(40, originY, 480, originY); // x-axis
        drawArrow(originX, 380, originX, 20); // y-axis

        // Labels for axes and origin
        ctx.fillText('y', originX - 25, 25);
        ctx.fillText('x', 475, originY - 20);
        ctx.fillText('O', originX - 20, originY + 20);

        // 2. Draw Uniform Magnetic Field B
        ctx.fillText('B', 80, 80);
        drawCross(105, 80, 6);
        drawCross(originX - 150, originY - 100);
        drawCross(originX + 150, originY - 100);
        drawCross(originX - 150, originY + 100);
        drawCross(originX + 150, originY + 100);

        // 3. Draw Particle, Points, and Force Arrow
        const r_coord_x = originX + 90;
        const f_coord_x = originX + 150;
        
        // Point R on the x-axis
        ctx.beginPath();
        ctx.arc(r_coord_x, originY, 2.5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('R', r_coord_x, originY + 25);
        
        // Particle (dot above R)
        ctx.beginPath();
        ctx.arc(r_coord_x, originY - 5, 4, 0, 2 * Math.PI);
        ctx.fill();

        // Arrow representing initial force/velocity
        const arrow_start_x = r_coord_x + 10;
        const arrow_end_x = arrow_start_x + 90;
        const arrow_y = originY - 5;
        drawArrow(arrow_start_x, arrow_y, arrow_end_x, arrow_y);
        
        // Point F on the x-axis
        ctx.fillText('F', f_coord_x, originY + 25);

        // Label for particle properties
        ctx.fillText('m, q > 0', arrow_start_x + 45, arrow_y - 25);

    </script>
</body>
</html>